<!--封装table 多选 分页-->
<template>
    <div class="app-comm-table-wrap m-y-20">
        <!-- 表格 -->
        <div v-show="!(!loading && tableData.length === 0)">
            <el-row>
                <el-table
                    ref="mutipleTable"
                    v-loading="loading"
                    element-loading-spinner="el-icon-loading"
                    :cell-style="getCellStyle"
                    style="width: 100%"
                    :header-cell-style="{ background: '#E5F7FF' }"
                    :class="tableClass"
                    :data="tableData"
                    :stripe="options.stripe"
                    :border="options.border"
                    :highlight-current-row="options.highlightCurrentRow"
                    :lazy="options.lazy"
                    :default-sort="defaultSort"
                    :empty-text="emptyText"
                    :show-summary="showSummary"
                    :summary-method="getSummaries"
                    :row-key="getRowKeys"
                    @sort-change="sortChange"
                    @row-click="clickRow"
                    @row-dblclick="dblclickRow"
                    @row-contextmenu="contextmenu"
                    @header-click="headClick"
                    @header-contextmenu="headcontextmenu"
                    @current-change="rowChange"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column
                        v-if="mutiSelect"
                        :reserve-selection="true"
                        :selectable="selectable"
                        type="selection"
                        width="75"
                    />
                    <template v-for="(column, index) in columns">
                        <!--region 数据列-->
                        <!-- slot 添加自定义配置项 -->
                        <slot v-if="column.slot" :name="column.slot" />
                        <!-- 嵌套式渲染列（暂支持一层嵌套） -->
                        <el-table-column
                            v-else-if="column.labelList"
                            :key="column.label"
                            :label="column.label"
                            align="center"
                        >
                            <!-- 默认渲染列 -->
                            <el-table-column
                                v-for="(columnItem, i) in column.labelList"
                                :key="columnItem.label"
                                :prop="columnItem.prop"
                                :label="columnItem.label"
                                :render-header="columnItem.renderHeader"
                                :align="columnItem.align"
                                :min-width="columnItem.width || 80"
                                :fixed="columnItem.fixed"
                                :sortable="columnItem.sortable || false"
                            >
                                <template slot-scope="scope">
                                    <template v-if="!columnItem.render">
                                        <!-- 处理数据 -->
                                        <template v-if="columnItem.formatter">
                                            <span
                                                v-html="
                                                    columnItem.formatter(
                                                        scope.row,
                                                        columnItem
                                                    )
                                                "
                                            />
                                        </template>
                                        <!-- 路由跳转 -->
                                        <template v-else-if="columnItem.router">
                                            <span
                                                class="text-primary c-p"
                                                @click="
                                                    handelBtn(
                                                        columnItem,
                                                        scope.row
                                                    )
                                                "
                                                >{{
                                                    scope.row[columnItem.prop]
                                                }}</span
                                            >
                                        </template>
                                        <template v-else>
                                            <span>{{
                                                scope.row[columnItem.prop]
                                            }}</span>
                                        </template>
                                    </template>

                                    <template
                                        v-else-if="columnItem.type === 'index'"
                                    >
                                        <span>{{ i }}</span>
                                    </template>

                                    <template v-else>
                                        <expand-dom
                                            :column="columnItem"
                                            :row="scope"
                                            :render="columnItem.render"
                                            :index="index"
                                        />
                                    </template>
                                </template>
                            </el-table-column>
                        </el-table-column>

                        <!-- 序号 -->
                        <el-table-column
                            v-else-if="column.type === 'index'"
                            :key="column.label"
                            :label="column.label"
                            type="index"
                            :align="column.align"
                            :width="column.width"
                        />

                        <!-- 默认渲染列 -->
                        <el-table-column
                            v-else
                            :key="column.label"
                            :prop="column.prop"
                            :label="column.label"
                            :align="column.align"
                            :width="column.width"
                            :min-width="column.minWidth"
                            :render-header="column.renderHeader"
                            :fixed="column.fixed"
                            :sortable="column.sortable || false"
                            :show-overflow-tooltip="
                                column.showoverflowtooltip == 'false'
                                    ? false
                                    : true
                            "
                        >
                            <template v-if="column.isHeader" slot="header">
                                <span>{{ column.label }}</span>
                                <el-tooltip
                                    class="item"
                                    effect="dark"
                                    :content="column.headerText"
                                    placement="right"
                                >
                                    <i
                                        class="el-icon-info"
                                        style="color: #e4e4e4"
                                    />
                                </el-tooltip>
                            </template>

                            <template slot-scope="scope">
                                <template v-if="!column.render">
                                    <!-- 处理数据 -->
                                    <template v-if="column.formatter">
                                        <span
                                            v-html="
                                                column.formatter(
                                                    scope.row,
                                                    column
                                                )
                                            "
                                        />
                                    </template>
                                    <!-- 路由跳转 -->
                                    <template v-else-if="column.router">
                                        <span
                                            class="text-primary c-p"
                                            @click="
                                                handelBtn(column, scope.row)
                                            "
                                            >{{ scope.row[column.prop] }}</span
                                        >
                                    </template>

                                    <template v-else>
                                        <span>{{
                                            scope.row[column.prop]
                                        }}</span>
                                    </template>
                                </template>

                                <template v-else>
                                    <expand-dom
                                        :column="column"
                                        :row="scope"
                                        :render="column.render"
                                        :index="index"
                                    />
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                    <!-- 无数据 -->
                    <no-data slot="empty" />
                </el-table>
            </el-row>

            <el-row v-if="showPage" class="app-global-page">
                <PaginationSize
                    :total="total"
                    :page.sync="page.pageNum"
                    :limit.sync="page.pageSize"
                    class="pagination-style"
                    layout="slot, prev, pager, next, jumper"
                    @pagination="pagination"
                >
                    <span class="el-pagination__total"
                        >共 {{ total }} 条，当前第{{
                            (page.pageNum - 1) * page.pageSize + 1
                        }}-{{
                            (page.pageNum - 1) * page.pageSize +
                            tableData.length
                        }}条</span
                    >
                </PaginationSize>
            </el-row>
        </div>

        <!-- 空数据 -->
        <div v-show="!loading && tableData.length === 0" class="no-data-box">
            <NoData :title="title" />
        </div>
    </div>
</template>
<!--endregion-->
<script>
import PaginationSize from '@/components/PaginationSize'
import ExpandDom from '@/components/ExpandDom'
import NoData from '@/components/NoData'

export default {
    name: 'CommTable',
    // 组件
    components: {
        PaginationSize,
        ExpandDom,
        NoData
    },
    props: {
        loading: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: '暂无数据'
        },
        selectable: {
            // 复选框是否可选
            type: Function,
            default: () => {
                return true
            }
        },
        emptyText: {
            type: String,
            default: '暂无数据'
        },
        showSummary: {
            type: Boolean,
            default: false
        },
        // 总数
        total: {
            type: [Number],
            default: 0
        },
        // 数据源
        tableData: {
            type: Array,
            default: () => []
        },
        // 数据列表
        // 需要展示的列 === prop：列数据对应的属性，label：列名，align：对齐方式，width：列宽
        columns: {
            type: Array,
            default: () => []
        },
        mutiSelect: {
            // 是否支持批量多选
            type: Boolean,
            default: false
        },
        defaultSort: {
            // 是否支持表头排序
            type: Object,
            default: () => {
                return {}
            }
        },
        // table 表格的控制参数
        options: {
            type: Object,
            default: () => {
                return {
                    height: 300, // 默认高度-为了表头固定
                    stripe: false, // 是否为斑马纹 table
                    highlightCurrentRow: true, // 是否要高亮当前行
                    border: false, // 是否有纵向边框
                    lazy: false // 是否需要懒加载
                }
            }
        },
        tableClass: {
            type: String,
            default: 'hxTable'
        },
        // 是否展示分页
        showPage: {
            type: Boolean,
            default: false
        }
    },
    // 数据
    data() {
        return {
            multipleSelection: [], // 多行选中
            page: {
                pageNum: 1, // 页数
                pageSize: 20 // 每页展示数量
            }
        }
    },
    computed: {},
    watch: {
        tableData() {}
    },
    mounted() {},
    methods: {
        getRowKeys(row) {
            return row.id
        },

        // 父级调用 是否初始化 pageNum = 1 查询使用
        searchChange() {
            this.$set(this.page, 'pageNum', 1)
            this.$set(this.page, 'pageSize', 20)
            this.pagination()
        },

        // 触发分页跳转  父级接收统一current与size
        pagination(init) {
            if (init) {
                this.page.pageNum = init.page
                this.page.pageSize = init.limit
            }
            this.$emit('pagination', this.page)
        },
        // 路由跳转操作
        handelBtn(column, row) {
            const param = { ...(column.queryId || {}) }
            let query = {}
            for (const key in param) {
                query[key] = row[param[key]]
            }
            query = { ...query, ...(column.otherQuery || {}) }
            console.log(query, 'query')
            this.$router.push({
                name: column.router,
                params: query
            })
        },
        // 选中状态
        handleSelectionChange(val) {
            console.log(val, '-------------子组件')
            this.multipleSelection = val
            this.$emit('handleSelectionChange', val)
        },

        getSummaries() {},
        clickRow(row, column, event) {
            // 单击行事件
            const data = {
                row: row,
                column: column,
                event: event
            }
            this.$emit('clickRow', data)
        },
        dblclickRow(row, column, event) {
            // 双击行事件
            const data = {
                row: row,
                column: column,
                event: event
            }
            this.$emit('dblclickRow', data)
        },
        contextmenu(row, column, event) {
            // 右键行事件-没去掉页面默认的
            const data = {
                row: row,
                column: column,
                event: event
            }
            this.$emit('contextmenu', data)
        },
        headClick(column, event) {
            // 头部列点击事件
            const data = {
                column: column,
                event: event
            }
            this.$emit('headClick', data)
        },
        headcontextmenu(column, event) {
            // 头部列右键点击事件
            const data = {
                column: column,
                event: event
            }
            this.$emit('headcontextmenu', data)
        },
        rowChange(currentRow, oldCurrentRow) {
            // 当前行发生改变时的事件
            const data = {
                currentRow: currentRow,
                oldCurrentRow: oldCurrentRow
            }
            this.$emit('rowChange', data)
        },
        sortChange({ column, prop, order }) {
            const param = {
                prop: prop,
                order: order
            }
            this.$emit('sortChange', param)
        },
        getCellStyle({ column }) {
            // 针对Safari表格width与showOverflowTooltip暂不能共存异常
            const tempWidth = column.realWidth || column.width
            if (column.showOverflowTooltip) {
                return {
                    minWidth: tempWidth + 'px',
                    maxWidth: tempWidth + 'px'
                }
            }
            return {}
        }
    }
}
</script>
<style lang="scss" scoped>
.app-comm-table-wrap ::v-deep {
    .el-table::before,
    .el-table__fixed::before,
    .el-table__fixed-right::before {
        border: none;
        height: 0;
    }
    .el-table {
        border: none;
        tr:nth-child(even) {
            //偶数行
            background: #fff;
        }
        tr:nth-child(odd) {
            //奇数行
            background: #f7f9fa;
        }

        .el-table__body .el-table__row.hover-row td {
            background-color: #e5f7ff;
        }
        thead {
            tr {
                background: #f9fbfc;
            }
            th {
                padding: 14px 0;
                background: #fff !important;
            }
            .cell {
                font-size: 13px;
                font-weight: bold;
                // padding: 0 10px 0 30px;
                // font-family: PingFangSC-Medium;
                color: #343a3d;
                letter-spacing: 0;
            }
        }
        tbody {
            tr td {
                height: 50px;
                padding: 9px 0;
            }
            .el-tag--medium {
                height: 20px;
                line-height: 18px;
                padding: 0 6px;
            }
            .cell {
                font-size: 12px;
                // padding: 0 10px 0 30px;
                // font-family: PingFangSC-Medium;
                color: #343a3d;
                letter-spacing: 0;
            }
        }
        .cell {
            text-align: center;
            font-size: 12px;
        }
        .is-right .cell {
            text-align: right;
        }
        td {
            border-bottom: none;
        }
        th.is-leaf {
            border-bottom: none;
        }

        .el-table__row--striped td {
            background: #f7f9fa;
        }
    }
    .no-data-box {
        background-color: #fff;
    }
    .el-loading-mask {
        z-index: 9;
    }
    .el-loading-spinner i {
        font-size: 30px;
    }
    .pagination-container {
        margin-top: 0;
        border-top: 1px #f2f2f2 solid;
        width: 100%;
        background: #fff;
        text-align: right;
        padding: 10px 20px;

        .el-pagination {
            width: 100%;
            font-weight: normal;
            .el-pager li {
                font-size: 12px;
                color: #84959e;
            }
        }
        .hidden {
            display: none;
        }
        .el-pagination__total,
        .el-pagination__jump {
            color: #343a3d;
            .el-input__inner {
                border: 0;
                background-color: #f7f9fa;
                font-size: 12px;
                line-height: 28px;
            }
        }
        &.is-background {
            .btn-prev,
            .btn-next {
                background-color: #f7f9fa;
            }
        }
    }
}
</style>
